<template>
<div class="account">

    <div class="card" :class="items.defaultResume == 0?'default':''" v-for="(items,index) in dataList" :key="index">
        <h3>{{items.type ==1 ? (items.defaultResume == 0 ? '默认简历' : '简历') : '附件简历'}}</h3>
        <div class="card-content">
            <div class="tag fl">
                <em>{{items.resumeName}}</em>
                <small>简历公开
                    <el-switch
                        v-model="items.public"
                        @change="openResume(items.id)"
                        active-color="#5e9f8e"
                        inactive-color="#d9d9d9">
                    </el-switch>
                </small>
            </div>
            <div class="data fl">
                <ul>
                    <li v-if="items.type == 1">
                        <em>{{items.complete||0}}%</em>
                        <small>简历完整度</small>
                    </li>
                    <li v-else>
                        <em><el-switch
                                v-model="items.defaultSwitch"
                                active-color="#5e9f8e"
                                @change="setDefault(items.id, items.defaultResume)"
                                inactive-color="#d9d9d9">
                            </el-switch>
                        </em>
                        <small>设为默认简历</small>
                    </li>
                    <li>
                        <em>{{items.postApplied||0}}</em>
                        <small>已申请职位</small>
                    </li>
                    <li>
                        <em>{{items.interviewInvitation || 0}}</em>
                        <small>面试邀请</small>
                    </li>
                    <li>
                        <em>{{items.attention || 0}}</em>
                        <small>关注我的</small>
                    </li>
                </ul>
            </div>
            <div class="tool fr" v-if="items.type == 1">
                <span @click="goToEdit(items.id)">编辑</span>
                <span @click="rest(items.id)">刷新</span>
                <span @click="delResume(items.id)">删除</span>
            </div>
            <div class="tool fr" style="margin-top: 40px;" v-else>
                <span @click="rest(items.id)">刷新</span>
                <span @click="delResume(items.id)">删除</span>
            </div>
        </div>
    </div>

    <div class="btn-items">
        <button @click="showAddDialog(true , 1)"><i class="icon-add"></i>新增简历</button>
        <button @click="showAddDialog(true , 2)"><i class="icon-annex"></i>上传附件简历</button>
        <span>上传格式word、pdf、ppt，文件大小10M以内</span>
    </div>
    <el-dialog title="新增简历" :visible.sync="dialogFormVisible" class="add-resume" width="500px">
        <el-form :model="form" ref="form" label-width="85px" :rules="rules" hide-required-asterisk>
            <el-form-item label="简历名称：" prop="resumeName">
                <el-input v-model="form.resumeName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="上传附件：" prop="attachmentId" v-if="dialog_type == 2">
                <!-- <el-input v-model="form.attachmentId" autocomplete="off"></el-input> -->

                <el-upload
                    class="upload-demo"
                    action="#"
                    :show-file-list="false"
                    :http-request="uploadFaceFiles">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div>
                        {{file.name}}
                    </div>
                    <div slot="tip" class="el-upload__tip">只能上传word、pdf、ppt等文件，且不超过10M以内</div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <button @click="showAddDialog(false , 3)" class="cancel">取 消</button>
            <button @click="addResumeSure()" class="sure">确 定</button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import { findResumes } from '@/api/me/account'
import { addResume, updateDefaultResume, deleteResume, openResume, setDefaultResume } from '@/api/me/resume'
import {filesAnon,findBaseData} from '@/api/base'
export default {
    name: "userInfo",
    data() {
        return {
            dialogFormVisible: false,
            onlySaveOne: false,
            dialog_type : 1,
            form:{
                resumeName:'',
                isPublic: 1,
                type: 1,
                attachmentId:'',
                attachmentName: '',
                defaultSwitch:false,
            },
            file:{},
            rules: {
                resumeName: [{ required: true, trigger: "blur", message: "简历名称不能为空" }]
            },
            ajaxData:{
                "limit": 10,
                "page": 1
            },
            dataList:[],
            total:0
        };
    },
    watch:{},
    created(){
        this.getResumes();
        this.$emit('navIndex', 2);
    },
    methods:{
        showAddDialog(val, type){
            this.form.resumeName = '';
            
            if(this.onlySaveOne && type == 2){
                this.msgError("附件简历只能添加一个")
                return false;
            }
            this.dialogFormVisible=val;
            this.dialog_type = type;
            
        },
        uploadFaceFiles(params){
            var vm = this;
            const file = params.file,
                fileType = file.type,
                fileName = file.name,
                isImage = fileType.indexOf("docx") != -1,
                isLt10M = file.size / 1024 / 1024 < 2;

            if(!isLt10M){
                this.$message.error("文件过大");
            }
            // 根据后台需求数据格式
            const form = new FormData();
            // 文件对象
            form.append("file", file);
            // 项目封装的请求方法，下面做简单介绍
            filesAnon(form).then(res => {
                this.file = res
                this.msgSuccess("上传成功")
                this.$set(vm.form,'attachmentId',res.id)
                this.$set(vm.form,'attachmentName',res.url)
                this.$set(vm.form,'type', 2)
            }).catch(res => {
                //this.$message.error("上传失败，请重新上传");
            })
        },
        addResumeSure(){
            this.$refs.form.validate(valid => {
                if (valid) {
                    addResume(this.form).then(res => {
                        this.$message.success('新增成功');
                        this.getResumes();
                        this.dialogFormVisible=false;
                    }).catch(err => {
                        this.$message.error(err);
                    })
                }
            })
        },
        getResumes(){
            findResumes(this.ajaxData).then(res => {
                this.total=res.count;
                this.dataList = res.data;
                for (let i = 0; i < res.data.length; i++) {
                    // this.dataList[i].isPublic == 1 ? true : false;
                    
                    if(this.dataList[i].type == 2){
                        this.onlySaveOne = true;
                    }

                    if(this.dataList[i].type == 2 && this.dataList[i].defaultResume == 0){
                        this.dataList[i].defaultSwitch = true
                    }else{
                        this.dataList[i].defaultSwitch = false
                    }

                    if(this.dataList[i].isPublic == 1){
                        this.dataList[i].public = true;
                    }else{
                        this.dataList[i].public = false;
                    }
                }
            }).catch(err => {
                this.$message.error(err);
            })
        },
        goToEdit(id){
            this.$router.push({ path:"/resume" ,query:{id:id}});
        },
        rest(id){
            let data = {'resumeId': id}
            updateDefaultResume(data).then(res => {
                if(res.resp_code == 0){
                    this.msgSuccess(res.resp_msg);
                }else{
                    thisi.msgInfo(res.resp_msg);
                }
                
            }).catch(err => {
                this.msgError(err);
            })
        },
        delResume(id){
            let data = {'id': id}
            deleteResume(data).then(res => {
                if(res.resp_code == 0){
                    this.getResumes();
                    this.msgSuccess(res.resp_msg);
                }else{
                    this.msgInfo(res.resp_msg);
                }
                
            }).catch(err => {
                this.msgError(err);
            })
        },
        openResume(id){
            let data = {'id': id}
            openResume(data).then(res => {
                if(res.resp_code == 0){
                    this.msgSuccess(res.resp_msg);
                    this.getResumes();
                }else{
                    this.msgInfo(res.resp_msg);
                }
            }).catch(err => {
                this.msgError(err);
            })
        },
        setDefault(id, defaultResume){
            if(defaultResume == 1){
                this.defaultSwitch = true;
                let data={ id: id }
                setDefaultResume(data).then(res => {
                    this.$message.success(res.resp_msg);
                    this.getResumes();
                }).catch(err => {
                    this.$message.error(err);
                })
            }
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.account{
    float: right;
    width: 970px;
    height: 840px;
    padding: 30px 35px;
    background-color: #fff;
    color: #787878;
    position: relative;
}

.card{
    margin-top: 30px;
    h3{
        width: 90px;
        height: 30px;
        line-height: 30px;
        color: #333;
        background: #DBDBDB;
        border-radius: 4px 4px 0px 0px;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
    }
    .card-content{
        position: relative;
        width: 895px;
        height: 130px;
        background: #FFFFFF;
        border: 1px solid #E8E8E8;
        border-top: 2px solid #DBDBDB;
        border-radius: 0px 0px 4px 4px;
        padding: 0 20px;
        em,small{
            display: block;
            font-style: normal;
        }

        .tag{
            margin-top: 40px;
            em{
                color: #111;
                font-size: 20px;
                font-weight: 400;
            }
            small{
                font-size: 14px;
                font-weight: 400;
                color: #777777;
                line-height: 47px;
            }
        }
        .data{
            width: 480px;
            position: absolute;
            top: 40px;
            left: 300px;
            ul{
                width: 100%;
                overflow: hidden;
            }
            li{
                float: left;
                text-align: center;
                margin-left: 10px;
                margin-right: 10px;
                em{
                    font-size: 22px;
                    font-weight: 400;
                    color: #CE3A5B;
                }
                small{
                    margin-top: 5px;
                    width: 100px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #777;
                }
            }
        }
        .tool{
            margin-top: 25px;
            margin-right: 10px;
            span{
                display: block;
                width: 29px;
                font-size: 14px;
                font-weight: 400;
                color: #3DABC4;
                line-height: 26px;
                cursor: pointer;
            }
        }

        i{
            display: inline-block;
            width: 22px;
            height: 14px;
            margin-left: 5px;
            margin-bottom: -2px;
            &.icon-radio{
                background: url(../../assets/image/icon-radio.png) no-repeat;
            }
            &.active{
                background: url(../../assets/image/icon-radio-true.png) no-repeat;
            }
        }
    }

    &.default{
        h3{
            color: #fff;
            background: #CE3A5B;
        }
        .card-content{
            border-top: 2px solid #CE3A5B;
        }
    }
}

.btn-items{
    margin-top: 60px;
    button{
        height: 36px;
        line-height: 36px;
        background: #3DABC4;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        border: 0;
        padding: 0 15px;
        outline: none;
        cursor: pointer;

        -moz-transition: all 0.2s;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;

        &:hover{
            background: #3494aa;
        }

        &:first-child{
            margin-right: 30px;
            margin-left: 20px;
        }
        i{
            display: inline-block;
            margin-right: 5px;
            margin-bottom: -2px;
            width: 14px;
            height: 14px;
        }
        i.icon-add{
            background: url(../../assets/image/icon-add.png) no-repeat;
        }
        i.icon-annex{
            background: url(../../assets/image/icon-annex.png) no-repeat;
            background-size: 100%;
        }
    }
    span{
        color: #999;
        margin-left: 20px;
    }
}


 >>>.el-switch__core{
    width:22px!important;
    height:14px;
    /*color:#409EFF;*/
  }
  /*设置圆*/
  >>>.el-switch__core::after{
    width:10px;
    height:10px;
    margin-top: 0;
  }
  >>>.el-switch.is-checked .el-switch__core::after {
        left: 100%;
        margin-left: -10px;
    }
</style>
<style rel="stylesheet/scss" lang="scss">
.add-resume{
    .el-dialog__body{
        padding-right: 60px;
    }
    .cancel{
        height: 36px;
        line-height: 36px;
        background: #fff;
        border:1px solid #ccc;
        color: #999;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        padding: 0 15px;
        outline: none;
        cursor: pointer;
        margin-right: 10px;
        -moz-transition: all 0.2s;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;

        &:hover{
            background: #fcfcfc;
        }
    }
    .sure{
        height: 36px;
        line-height: 36px;
        background: #3DABC4;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        border: 0;
        padding: 0 15px;
        outline: none;
        cursor: pointer;
        -moz-transition: all 0.2s;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;

        &:hover{
            background: #3494aa;
        }
    }
}
</style>